import { useSyncExternalStore } from "react";


// history api去实现 跳转页面 监听 history 变化
export const useHistory = () => {
        // 订阅
        const subscribe = (callback: () => void) => {

            window.addEventListener('popstate', callback)
            window.addEventListener('hashchange', callback)
            // 当浏览器的前进或后退按钮被点击时或者地址栏URL改变时，就会将触发 popstate、hashchange 事件。
            return () => {
                window.removeEventListener('popstate', callback)
                window.removeEventListener('hashchange', callback)
            }
        }
    
        // 快照（获取值）
        const getSnapshot = () => {
            return window.location.href
        }
        const result = useSyncExternalStore(subscribe, getSnapshot)

        // 通过pushState、replaceState方法跳转时，不会触发popstate、hashchange事件，需要手动触发
        const push = (url: string) => {
            // window 上的 history 对象中的 pushState 方法，往浏览器的历史记录中添加一个新的记录
            history.pushState(null, '', url)
            window.dispatchEvent(new PopStateEvent('popstate'))
        }

        const replace = (url: string) => {
            // window 上的 history 对象中的 replaceState 方法，替换浏览器的历史记录中的当前记录
            history.replaceState(null, '', url)
            window.dispatchEvent(new PopStateEvent('popstate'))
        }
    
    
        return [
            result,
            push,
            replace
        ] as const
}